<template>
  <div class="wrap" :class="{'coll': openColl}">
    <ul class="pt-menu">
      <li class="menu-li flex-row"
        v-for="(item,menuIndex) in menuList" :key="item.pid"
        :class="{isred: item.color === '#f75d78', isblue: item.color === '#5fabf7','is-active': $route.path === item.link || eachPath(item.subList,$route.path)}"
        @click.stop="toMenuPath(item)"
        @mouseover.self="selectMenu($event,item,menuIndex)">
        <icon-svg class="left" :icon="item.icon.indexOf('el-icon1-erp-') > -1 ? item.icon.split('el-icon1-erp-')[1] : item.icon" :style="{'color':item.color||'#8d9199'}" />
        <span v-if="!openColl">{{item.pname}}</span> 
        <icon-svg v-if="item.subList.length && !openColl > 0" class="right" icon="xiangyou" />
        <ul v-show="item.subList.length > 0 && isShow" class="pt-submenu" :style="{top: clientY + 'px'}">
          <li @click="toPath(menuIndex,list)" class="flex-row" v-for="list in item.subList"
              :class="{'is-active': $route.path === list.link }"
              :key="list.pid">
            {{list.pname}}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      menuList: {
        type: Array,
        default: () => []
      },
      scrollTop: {
        type: Number,
        default: 0
      },
      wrapHeight: {
        type: Number,
        default: 0
      },
      openColl: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        subList: [],
        clientY: '',
        isShow: true
      }
    },
    methods: {
      selectMenu(e, item, menuIndex) {
        this.isShow = true
        const children = e.target.children
        if (children.length > 0) {
          for (let i = 0; i < children.length; i++) {
            if (children[i].className === 'pt-submenu') {
              const [h, t] = [children[i].offsetHeight, e.target.offsetTop - this.scrollTop]
              if ((h + t) > this.wrapHeight) {
                this.clientY = this.wrapHeight - h
              } else {
                this.clientY = t
              }
            }
          }
        }
      },
      eachPath(arrs, link) {
        let isPass = false
        if (arrs.length > 0) {
          for (let i = 0; i < arrs.length; i++) {
            if (arrs[i].link === link) {
              isPass = true
              break
            }
          }
        }
        return isPass
      },
      toMenuPath(item) {
        if (item.link) {
          this.$router.push(item.link)
        }
      },
      toPath(menuIndex, item) {
        this.isShow = false
        this.$router.push(item.link)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './css/pt-menu.scss';
</style>